<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
    <div class="app-container calendar-list-container no-padding">
        <el-row>
            <div class="warn-tabletop-handles">
                <!-- <div class="xf-tabhd-left">
                    <el-button class="filter-item" @click="handleCreate" type="primary">添加测点告警</el-button>
                </div> -->
                <div class="xf-tabhd-right">
                    测点
                    <el-input v-model="listQuery.measuringPoint" placeholder="请输入测点" class="xf-query-input"></el-input>
                    测点类型
                    <el-select v-model="listQuery.measuringPointType" placeholder="请选择" class="xf-query-select">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                    <el-button @click="tableQuery" type="primary">查询</el-button>
                </div>
            </div>
        </el-row>
        <el-table key='tableKey' :data="list" v-loading.body="listLoading" style="width: 100%">
            <el-table-column label="序号" width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.id}}</span>
                </template>
            </el-table-column>
            <el-table-column label="测点">
                <template slot-scope="scope">
                    <span>{{scope.row.measuringPoint}}</span>
                </template>
            </el-table-column>
            <el-table-column label="代号">
                <template slot-scope="scope">
                    <span>{{scope.row.dataUnit}}</span>
                </template>
            </el-table-column>
            <el-table-column label="单位">
                <template slot-scope="scope">
                    <span>{{scope.row.dataUnit}}</span>
                </template>
            </el-table-column>
            <el-table-column label="监测类型">
                <template slot-scope="scope">
                    <span>{{scope.row.dataUnit}}</span>
                </template>
            </el-table-column>
            <el-table-column label="正常值">
                <template slot-scope="scope">
                    <span>{{scope.row.dataUnit}}</span>
                </template>
            </el-table-column>
            <el-table-column label="报警阈值">
                <template slot-scope="scope">
                    <span v-for="item in scope.row.deviceAlarmThresholds" :key="item.level">
                      {{item.level}}:&nbsp;&nbsp;{{item.alarmMin===undefined?'-&infin;':item.alarmMin}}~{{item.alarmMax===undefined?'+&infin;':item.alarmMax}}<br>
                    </span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button size="small" plain @click="handleUpdate(scope.row)">
                        <icon-svg icon-class="bianji" style="fill:#2683f5" />
                    </el-button>
                    <el-button size="small" plain @click="handleDelete(scope.row)">
                        <icon-svg icon-class="shanchu" style="fill:#2683f5" />
                    </el-button>
                </template>
            </el-table-column> -->
        </el-table>
        <div v-show="!listLoading" class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[15,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :fullscreen='true' :show-close='false' custom-class="fulldialog">
            <!-- 自定义关闭按钮 -->
            <span class="custom-dialog-btn" @click="cancel('form')">
                <i class="el-icon-close"></i>
            </span>
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" label-position='top'>
                <el-form-item label="测点" prop="dataUnit">
                  <el-select v-model="form.dataUnit" placeholder="请选择" style="width:100%">
                    <el-option
                      v-for="item in measuringPointSelect"
                      :key="item.measuringPoint"
                      :label="item.measuringPoint"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="单位" prop="dataUnit">
                    <el-select v-model="form.dataUnit" placeholder="请选择" :disabled='true' style="width:100%">
                      <el-option
                        v-for="item in measuringPointSelect"
                        :key="item.measuringPoint"
                        :label="item.dataUnit"
                        :value="item.id">
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="item.level" v-for="(item,index) in measurLevelArr" :key="item.alId">
                    <el-input-number v-if="item.alarmMin<=-999999999" :disabled="true"></el-input-number>
                    <el-input-number v-model="item.alarmMin" @change="handleChange(index)" :precision="5" :step="0.00001" v-else></el-input-number>
                      <span class="form-ele-line">~</span>
                    <el-input-number v-if="item.alarmMax>=999999999" :disabled="true"></el-input-number>
                    <el-input-number v-model="item.alarmMax" @change="handleChange(index)" :precision="5" :step="0.00001" :min="item.alarmMin" v-else></el-input-number>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')" round size="medium">确 定</el-button>
                <el-button v-else type="primary" @click="update('form')" round size="medium">确 定</el-button>
                <el-button @click="cancel('form')" round size="medium">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog title="删除测点告警" :visible.sync="dialogDeleteVisible" :show-close='false' custom-class="xf-jc-dialog" width="360px">
            <div class="xf-jc-deletect">
                <!-- <p>删除此测点将会导致传感器{{currentSelectObj.measuringPoint}}数据异常，报警时无法及时通知给相关人员。确定删除吗？</p> -->
                <p>删除将会导致传感器报警时无法通知，确定删除吗？</p>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="danger" round size="medium"  @click="deleteD(currentSelectObj)">删除</el-button>
                <el-button round size="medium"  @click="dialogDeleteVisible = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

import {
  page,
  queryDailog,
  addObj,
  getObj,
  delObj,
  putObj
} from "@/api/device/deviceAlarmThreshold/index";

export default {
  name: "measuringWarn",
  data() {
    return {
      measuringPointSelect:[],
      measurLevelArr:[],
      form: {
        dataUnit:undefined,
      },
      options: [
        {
          value: "-1",
          label: "全部"
        },
        {
          value: "1",
          label: "监测测点"
        },
        {
          value: "0",
          label: "火警测点"
        }
      ],
      rules: {
        dataUnit: [
           {
            required: true,
            message: "请选择测点",
            trigger: ['blur','change']
          }
        ]
      },
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 15,
        measuringPoint:undefined,
        measuringPointType: "-1"
      },
      dialogFormVisible: false,
      dialogDeleteVisible:false,
      currentSelectObj: {},
      dialogStatus: "",
      textMap: {
        update: "编辑测点告警",
        create: "添加测点告警"
      },
      tableKey: 0
    };
  },
  created() {
    this.getList();
  },
  methods: {
    tableQuery() {
      this.getList();
    },
    handleChange(index) {
      // 
    },
    handleCreate() {
      queryDailog().then(response => {
          this.measuringPointSelect = response.measuringPoint;
          this.measurLevelArr = response.level;
      })
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    cancel(formName) {
      this.$refs[formName].resetFields();
      this.resetTemp();
      this.dialogFormVisible = false;
    },
    handleUpdate(row) {
        getObj(row.id).then(response => {
        this.form.dataUnit = response.measuringPoint[0].id;
        this.measuringPointSelect = response.measuringPoint;
        this.measurLevelArr = response.level;
        this.dialogFormVisible = true;
        this.dialogStatus = "update";
      });
    },
    deleteD(row){
       this.dialogDeleteVisible = false;
        delObj(row.id).then(() => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
          this.getList();
        });
    },
    handleDelete(row) {
     this.dialogDeleteVisible = true;
     this.currentSelectObj = row;
    },
    getList() {
      this.listLoading = true;
      page(this.listQuery).then(response => {
        this.list = response.data.rows;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    update(formName) {
      let isTrue = true;
      this.measurLevelArr.forEach((item) => {
        if ((item.alarmMin>=item.alarmMax)||item.alarmMin===undefined||item.alarmMax===undefined) {
          isTrue = false;
          this.$notify({
            title: '警告',
            message: '报警阈值范围设置不正确！',
            type: 'warning'
          });
        }
      });
      if (isTrue) {
         let isSubmit = true
        for(let i = 0; i < this.measurLevelArr.length-1; i++){
          if(this.measurLevelArr[i].alarmMax>=this.measurLevelArr[i+1].alarmMin){
             isSubmit = false;
             this.$notify({
              title: '警告',
              message: '报警阈值范围设置不正确！',
              type: 'warning'
            });
          }  
        }
        if (isSubmit) {
          
          const set = this.$refs;
          set[formName].validate(valid => {
            if (valid) {
              putObj({"mpId":this.form.dataUnit,"level":JSON.stringify(this.measurLevelArr)}).then(() => {
                this.dialogFormVisible = false;

                this.$refs[formName].resetFields();
                this.resetTemp();

                this.getList();
                this.$notify({
                  title: "成功",
                  message: "修改成功",
                  type: "success",
                  duration: 2000
                });
              }).catch(function (error) {
                  console.log(error);
                });
            } else {
              return false;
            }
          });

        }
      }
    },
    create(formName) {
      // 内部对象大小对比
      let isTrue = true;
      this.measurLevelArr.forEach((item) => {
        if ((item.alarmMin>=item.alarmMax)||item.alarmMin===undefined||item.alarmMax===undefined) {
          isTrue = false;
          this.$notify({
            title: '警告',
            message: '报警阈值范围设置不正确！',
            type: 'warning'
          });
        }
      });
      if (isTrue) {
         let isSubmit = true
        for(let i = 0; i < this.measurLevelArr.length-1; i++){
          if(this.measurLevelArr[i].alarmMax>=this.measurLevelArr[i+1].alarmMin){
             isSubmit = false;
             this.$notify({
              title: '警告',
              message: '报警阈值范围设置不正确！',
              type: 'warning'
            });
          }  
        }
        if (isSubmit) {
          
          const set = this.$refs;
          set[formName].validate(valid => {
            if (valid) {
              addObj({"mpId":this.form.dataUnit,"level":JSON.stringify(this.measurLevelArr)}).then(() => {
                this.dialogFormVisible = false;

                this.$refs[formName].resetFields();
                this.resetTemp();

                this.getList();
                this.$notify({
                  title: "成功",
                  message: "创建成功",
                  type: "success",
                  duration: 2000
                });
              }).catch(function (error) {
                  console.log(error);
                });
            } else {
              return false;
            }
          });

        }
      }
      //增加成功
    },
    resetTemp() {
      this.form = {
        dataUnit:undefined,
        measuringPointType : "0"
      };
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.el-table th {
  background: #f5f7fa;
}
.warn-tabletop-handles {
  padding-bottom: 10px;
  font-size: 14px;
  color: #333;
  display: flex;
  justify-content: flex-end;
}
.xf-query-input,
.xf-query-select {
  width: 200px;
  margin: 0 10px;
}
.fulldialog > div {
  width: 500px;
  margin: 0 auto;
}
.fulldialog .el-dialog__title {
  font-size: 32px;
}
.fulldialog {
  .el-dialog__header {
    margin-top: 20px;
  }
  .custom-dialog-btn {
    position: absolute;
    font-size: 30px;
    left: 40px;
    top: 20px;
    color: #fff;
    &:hover {
      cursor: pointer;
    }
  }
  .dialog-footer {
    text-align: left;
  }
//   带下拉选择的输入
.tmselect .el-input {
    width: 80px;
  }
  .input-with-select .el-input-group__append {
    background-color: #fff;
  }
  .form-ele-line{
    padding: 0 22px;
  }
}
</style>
